<template>
  <div class="screen">
    <header>
      中层管理看板
    </header>
    <main>
      <div class="left">
        <div class="title">客户投诉排行</div>
        <div class="content">
          <EchartsOne/>
        </div>
      </div>
      <div class="center">
        <div class="top">
          <div class="top-left">
            <div>
              <span>综 合 合 格 率</span>
              <span>65%</span>
            </div>
            <div>
              <ProBar :ratio="65"/>
            </div>
          </div>
          <div class="top-right">
            <div>
              <span>一 次 合 格 率</span>
              <span>92%</span>
            </div>
            <div>
              <ProBar :ratio="92"/>
            </div>
          </div>
        </div>
        <div class="bottom">
            <div>个工厂客诉数量</div>
            <div></div>
        </div>
      </div>
      <div class="right">
        <div class="title">
          客 户 提 醒
        </div>
        <div class="item">
          <div class="item-title">
            <span>客户名称</span>
            <span>区域位置</span>
            <span>产品型号</span>
            <span>设备数量</span>
          </div>
          <div class="item-content">
            <ListOne :list="demo"/>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <EvaluationForm/>
    </footer>
  </div>
</template>

<script>
import ListOne from "@/views/reports/operation-kanban/components/list-one.vue";
import EchartsOne from "@/views/reports/manage-kanban/components/echarts-one.vue";
import ProBar from "@/views/reports/manage-kanban/components/pro-bar.vue";
import EvaluationForm from "@/views/reports/manage-kanban/components/evaluation-form.vue";

export default {
  name: "index",
  components: {
    ListOne,
    EchartsOne,
    ProBar,
    EvaluationForm
  },
  data() {
    return {
    }
  },
  activated() {
    this.init()
    document.querySelector(".ele-admin-content-view").style.height = "100%"
    this.refresh = true
    // console.log()
  },
  deactivated() {
    document.querySelector(".ele-admin-content-view").style.height = "auto"
  },
  methods: {
    init() {
      window.addEventListener("resize", this.resizeList)
      this.$once('hook:beforeDestroy', function () {
        window.removeEventListener('resize', this.resizeList)
      })
    },
    resizeList(event, args = this.$children) {
      const components = args
      if (components.length > 0) {
        components.forEach(component => {
          if (component.myEcharts) {
            component.myEcharts.resize()
          } else if (component.$children.length > 0) {
            this.resizeList(event, component.$children)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/conversion.scss";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.screen {
  width: 100%;
  height: 100%;
  color: white;
  @include flex-column;
  @include bg-url("~@/assets/liyang/bg.png");


  header {
    width: 100%;
    height: px2vh(100);
    font-size: px2vw(30);
    font-weight: bolder;
    color: white;
    letter-spacing: px2vw(3);
    text-shadow: 0px 0px 30px rgba(0, 171, 255, 1);
    @include bg-url("~@/assets/liyang/head.png");
    @include flex-center;
  }

  main {
    flex: 6;
    padding: 0 px2vh(30);
    margin-top: px2vh(-15);
    overflow: auto;
    @include flex-center;

    .left {
      flex: 2.4;
      height: 100%;
      @include bg-url("~@/assets/liyang/bg_earth.png");
      @include flex-center-column;

      .title {
        width: 100%;
        flex: 1;
        @include flex-center;
      }

      .content {
        width: 100%;
        flex: 16;
      }
    }

    .center {
      flex: 5;
      height: 100%;
      padding: 0 px2vw(28);
      @include flex-center-column;

      > .top {
        flex: 3;
        padding-top: px2vh(40);
        width: 100%;
        @include flex-center;
        >div{
          @include flex-column;
          justify-content:space-between;
          padding:px2vh(50) px2vw(30);
          >div{
            &:nth-of-type(1){
              @include flex;
              justify-content: space-between;
              align-items: baseline;
              flex:3;
            }

            &:nth-of-type(2){
              flex:2;
            }
          }
          span{
            &:nth-of-type(1){
              font-size: px2vw(18);
            }

            &:nth-of-type(2){
              font-size: px2vw(30);
              font-weight: 900;
              background: linear-gradient(0deg, #09FDFB 0%, #9CF4FF 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
        }

        > .top-left {
          height: 100%;
          flex: 1;
          @include bg-url("~@/assets/liyang/bg_big.png");
          margin-right: px2vw(28);
        }

        > .top-right {
          height: 100%;
          flex: 1;
          @include bg-url("~@/assets/liyang/bg_big.png");
        }
      }

      > .bottom {
        margin-top: px2vh(20);
        flex: 4;
        width: 100%;
        @include bg-url("~@/assets/liyang/bg_new2.png");
        @include flex-column;

        &>div:nth-child(1){
          flex: 1;
          width: 100%;
          @include flex-center;
        }
        &>div:nth-child(2){
          flex: 6.5;
          width: 100%;
        }
      }
    }

    .right {
      flex: 2.4;
      height: 100%;
      @include flex-center-column;

      .title {
        flex: 30;
        width: 100%;
        min-height: 0;
        overflow: hidden;
        font-size: px2vw(15);
        font-weight: bolder;
        @include flex-center;
        @include bg-url("~@/assets/liyang/bg_internal.png");
      }

      .item {
        flex: 303;
        overflow: hidden;
        width: 100%;
        @include flex-center-column;


        .item-title {
          box-sizing: border-box;
          flex: 27;
          width: 100%;
          font-size: px2vw(12);
          justify-content: space-between;
          align-items: center;
          padding: 0 px2vw(30);
          overflow: hidden;
          @include flex;
          @include bg-url-size("~@/assets/liyang/bg_arrowhead.png", 110%, 180%);

          span {
            flex: 1;
            text-align: center;
          }

        }

        .item-content {
          flex: 257;
          width: 100%;
          @include flex-column;
        }
      }
    }
  }

  footer {
    margin-top: px2vh(30);
    flex: 3.7;
    padding: 0 px2vh(30);
  }
}
</style>
